<template>
  <div class="hxstople" id="top">
    <!-- 饼干类 -->
    <div
      class="hxsleft1"
      v-for="item in data"
      v-show="ye"
      ref="binggan"
      @click.stop="bumaopao()"
    >
      <div class="title">{{ item.classer }}</div>
      <div class="shoucang">{{ item.soucang }}收藏</div>
      <div class="pinglun">{{ item.pinglun }}</div>
      <div class="zuozhe">
        <img :src="item.touxiang" />
        <span class="span1">{{ item.zuoze }}</span>
        <span class="shouspan" v-on:click.stop="fn1()" ref="souspan">{{
          shou
        }}</span>
        <span class="shouspan1" v-on:click.stop="fn2()" ref="souspan1">{{
          shou1
        }}</span>
      </div>
      <div class="time">
        <span class="time1">创建时间：{{ item.creattime }}</span>
        <span class="time2">最后修改：{{ item.finishtime }}</span>
      </div>
    </div>
    <!-- <components :is="a"></components> -->
    <!-- 流行菜单组件 二维码 arr1-->
    <Hxsliuxing></Hxsliuxing>

    <!-- 菜谱 -->
    <Hxscaipu :obj="this.m" :obj2="this.n"></Hxscaipu>

    <!-- 自定义模块今日推荐 -->
    <Hxstuijian></Hxstuijian>

    <!-- 广告模态弹窗 -->
    <Hxsguanggao></Hxsguanggao>

    <!-- 底部翻页 -->
    <div class="bottom">
      <span class="btn1" @click.stop="fnfanye1()">上一页</span>
      <span class="btn2" @click.stop="fnfanye1()">1</span>
      <span class="btn3" @click.stop="fnfanye2()">2</span>
      <span class="btn4" @click.stop="fnfanye2()">下一页</span>
    </div>

    <!-- 回到顶部 --><!-- 懒加载 -->
    <div class="dingbu" @click.stop="bumaopao" >
      <a href="#top">
        <span class="dingbupicture">
          <img src="https://s.chuimg.com/pic/2013/scroll_top.png" ref="myref" />
        </span>
      </a>
    </div>

    <!-- 版权 -->
  </div>
</template>

<script>
import Hxscaipu from "./Hxscaipu.vue";
import Hxstuijian from "./Hxstuijian.vue";
import Hxsguanggao from "./Hxsguanggao.vue";
export default {
  data() {
    return {
      data: "",
      shou: "收藏",
      shou1: "已收藏",
      // a:"Hxscaipu",
      ye: true,
      //父组件给儿子组件传值
      m: "true",
      n: "",
    };
  },
  methods: {
    // 锚点定位懒加载
    fn() {
      // console.log(9999, window.pageYOffset);
      if (window.pageYOffset >= 400) {
        // console.log(this.$refs);
        this.$refs.myref.style.display = "block";
        // console.log(dingbupicture);
      } else {
        this.$refs.myref.style.display = "none";
      }
    },
    bumaopao() {
      // console.log(8888);
    },
  
    //收藏设计
    fn1() {
      // console.log(9999,this.$refs.souspan1[0],this.$refs.souspan[0]);
      this.$refs.souspan[0].style.display = "none",
      this.$refs.souspan1[0].style.display = "block";
      alert("收藏成功！")
    },
    fn2() {
      // console.log(7777);
      this.$refs.souspan[0].style.display = "block",
      this.$refs.souspan1[0].style.display = "none";
      alert("已取消收藏！")
    },

    //翻页设计
    fnfanye1() {
      this.m = true;
      this.n = false;
      console.log(8888888);
    },
    fnfanye2() {
      // console.log(77777,this.$refs.binggan);
      this.m = false;
      this.n = true;
      console.log(this.m, this.n, 999999);
    },
  },

  created() {
    window.onscroll =()=> {
      this.fn();
    };
  },
  // 获取上边作者作菜单信息
  mounted() {

    let src = this.$route.query.id

    this.$axios
      .get("/hxs/zhonglei", {
        params: { classer: src },
      })
      .then((res) => {
        console.log(res);
        this.data = res.data;
      });
  },

  components: {
    Hxscaipu,
    Hxstuijian,
    Hxsguanggao,
    Hxsliuxing: () => import("./Hxsliuxing.vue"),
  },
};
</script>


<style lang="scss" scoped>
.hxstople {
  width: 1000px;
  height: 3360px;
  // background-color: antiquewhite;
  margin: 0 auto;
  position: relative;
}

.dingbupicture img {
  width: 60px;
  height: 60px;
  position: fixed;
  right: 20px;
  bottom: 80px;
  display: none;
}
.hxsleft1 {
  width: 660px;
  height: 420px;
  background-color: #f5f6f5;
}
.title {
  width: 100%;
  height: 75px;
  text-align: center;
  font-size: 34px;
  font-weight: bold;
  line-height: 75px;
  color: black;
  padding-top: 40px;
  margin-top: 62px;
}
.shoucang {
  text-align: center;
  color: #909090;
}
.pinglun {
  font-size: 16px;
  clear: black;
  padding: 40px 0 0 27px;
}
.pinglun:hover {
  color: aqua;
}
.zuozhe {
  width: 100%;
  height: 60px;
  // background-color: aquamarine;
  padding-left: 20px;
  margin-top: 26px;
  line-height: 50px;
  position: relative;
}
.zuozhe .span1 {
  margin-left: 10px;
  color: #dd3915;
}
.shouspan {
  position: absolute;
  width: 98px;
  height: 60px;
  background-color: #dd3915;
  text-align: center;
  color: white;
  line-height: 60px;
  right: 56px;
  display: block;
  top: 14px;
}
.shouspan1 {
  position: absolute;
  width: 98px;
  height: 60px;
  background-color: #dd3915;
  text-align: center;
  color: white;
  line-height: 60px;
  right: 56px;
  top: 14px;
  display: none;
}
.time {
  width: 320px;
  height: 60px;
  // background-color: violet;
  margin-left: 25px;
  margin-top: 47px;
}
.time1 {
  margin-right: 24px;
  color: #909090;
}
.time2 {
  color: #909090;
}
//翻页底部按钮

.bottom {
  width: 1000px;
  height: 80px;
  // margin-top: 12px;
  background-color: rgb(188, 185, 190);
  position: absolute;
  bottom: 0;
  right: 0;
}
.btn1 {
  display: inline-block;
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin-left: 200px;
  margin-right: 12px;
  margin-top: 20px;
  font-weight: bold;
}
.btn1:hover {
  background-color: #dd3915;
}
.btn2:hover {
  background-color: #dd3915;
  color: white;
}
.btn3:hover {
  background-color: #dd3915;
  color: white;
}
.btn4:hover {
  background-color: #dd3915;
  color: white;
}
.btn4 {
  width: 60px;
  height: 32px;
  text-align: center;
  display: inline-block;
  font-weight: bold;
  color: #dd3915;
  line-height: 30px;
  margin-left: 12px;
}
.btn2 {
  display: inline-block;
  width: 34px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  background-color: #dd3915;
  margin-right: 12px;
}
.btn3 {
  display: inline-block;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  width: 34px;
  height: 30px;
  color: #dd3915;
}
</style>
